<template>
	<view class="number-box" :type="type">
		<view class="sub flex-box" @click.stop="onReduce">
			<text class="iconfont icon-jian">-</text>
		</view>
		<text class="input" v-if="isShow" @click="onButo">{{currentValue}}</text>
		<input type="number" class="input" v-model="currentValue" @input="inputChange" @blur="outBlur" v-else>
		<view class="add flex-box" @click.stop="onAdd">
			<text class="iconfont icon-jia" style="font-size:30rpx;">+</text>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'hb-number-box',
		props: {
			value: {
				default: 1,
				type: Number
			},
			minNumber: {
				default: 1,
				type: Number
			},
			type: {
				default: '',
				type: String
			},
			bgColor: {
				default: '',
				type: String
			},
			textColor: {
				default: '',
				type: String
			},
			maxNumber: {
				default: '',
				type: [Number, String]
			}
		},
		data() {
			return {
				currentValue: Number(this.value),
				isShow:false
			}
		},
		watch: {
			value() {
				this.currentValue = Number(this.value);
				// if (this.value <= this.minNumber && this.value > 0) {
				// 	this.value = this.minNumber
				// 	this.currentValue = this.minNumber
				// }else if(this.value == 0 || this.value == ''){
				// 	this.currentValue = 1
				// }else{
					
				// }
				this.$emit('input', this.currentValue)
				// console.log(this.value,"vule7")
				// console.log(this.currentValue,"this.currentValue")
			},
		},
		methods: {
			onButo(){
				this.isShow = false
			},
			onAdd() {
				if (this.maxNumber) {
					if (this.currentValue >= this.maxNumber) {
						return false
					} else {
						this.currentValue += 1;
					}
				} else {
					this.currentValue += 1;
				}
				this.$emit('input', this.currentValue)
			},
			onReduce() {
				if(this.currentValue==0){
					return false
				}
				// if (this.currentValue <= this.minNumber) {
				// 	return false
				// }
				this.currentValue -= 1;
				this.$emit('input', this.currentValue)
			},
			inputChange(e) {
				if (this.currentValue < this.minNumber && this.currentValue > 0 || this.currentValue == 0) {
					// uni.showModal({
					// 	content:`不能小于最小值：${this.minNumber}` ,
					// })
					this.currentValue = Number(this.minNumber)
					// console.log(this.currentValue, "this.currentValue55555")
				} else if (this.currentValue == '') {
					this.currentValue = Number(1)
				} else {
					this.currentValue = Number(e.detail.value)
				}
				this.$emit('input', this.currentValue)
			},
			outBlur(e) {
				console.log(e, "eee1")
				if (e.detail.value == '') {
					// console.log(this.currentValue,"this.currentValue")
					this.currentValue = Number(1)
				} else {
					this.isShow = true
					// if ( e.detail.value <= this.minNumber) {
					// 	this.$nextTick(() => {
					// 	 this.currentValue = Number(this.minNumber)
					// 	})
					// }
				}
				this.$emit('input', this.currentValue)
			}
		}
	};
</script>
<style scoped lang="scss">
	.number-box {
		display: flex;
		align-items: center;
		height: 42rpx;

		&[type=special] {
			background: #F8DFAE;

			.add,
			.sub {
				background: #F8DFAE;
				border-radius: 0;
			}

			.input {
				width: 80rpx;
				color: #BA8F39;
			}

			.flex-box {
				color: #000;
				.iconfont {
					color: #BA8F39;
				}
			}

			
		}
		.sub {
			width: 42rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 10rpx 0rpx 0rpx 10rpx;
			border: 1rpx solid #F0F0F0;
		}
		
		.add {
			width: 42rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 0rpx 10rpx 10rpx 0rpx;
			border: 1rpx solid #F0F0F0;
		}

		.input {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 104rpx;
			font-size: 28rpx;
			color: #000;
			text-align: center;
		}

		.flex-box {
			display: flex;
			justify-content: center;
			align-items: center;
			// .iconfont {
			//   color: $hb-text-black-color;
			//   font-size: 26rpx;
			//   font-weight: bold;
			// }
		}
	}
</style>
